<template>
  <el-card class="home__card-item home__waiting-payment">
    <div slot="header" class="home__card-title clearfix">
      <h3>产品排行</h3>
      <div>
        <tabs v-model="currentYear" :tabs="years" size="mini" />
      </div>
    </div>

    <div class="home__card-content">
      <!-- 汇总 -->
      <div class="home__card-content-sum">
        <div class="home__card-content-sum__item">
          <label>{{ this.summary.totalAmountText }}</label>
          <span>{{ this.summary.totalAmount }}</span>
        </div>
        <div class="home__card-content-sum__item">
          <label>{{ this.summary.totalText }}</label>
          <span>{{ this.summary.total }}</span>
        </div>
      </div>

      <!-- 详情 -->
      <div class="home__card-content-wrap">
        <tabs v-model="currentTab" :tabs="tabs" />
        <!-- 销售 -->
        <template v-if="currentTab === 'sale'">
          <div class="home__waiting-payment__content">
            <el-table :data="tableData" border size="mini" height="350px">
              <el-table-column
                show-overflow-tooltip
                prop="productName"
                label="产品名称" />
              <el-table-column
                show-overflow-tooltip
                prop="totalAmount"
                label="订单金额" />
              <el-table-column
                show-overflow-tooltip
                prop="total"
                label="订单数量" />
            </el-table>
            <el-table :data="tableData2" border size="mini" height="350px">
              <el-table-column
                show-overflow-tooltip
                prop="productName"
                label="产品名称" />
              <el-table-column
                show-overflow-tooltip
                prop="totalAmount"
                label="订单金额" />
              <el-table-column
                show-overflow-tooltip
                prop="total"
                label="订单数量" />
            </el-table>
          </div>
          <el-pagination
            :current-page="currentPage"
            background
            layout="prev, pager, next"
            :total="total"
            @currentChange="currentChange" />
        </template>
        <!-- 采购 -->
        <template v-if="currentTab === 'procure'">
          <div class="home__waiting-payment__content">
            <el-table :data="tableData" border size="mini" height="350px">
              <el-table-column
                show-overflow-tooltip
                prop="productName"
                label="产品名称" />
              <el-table-column
                show-overflow-tooltip
                prop="totalAmount"
                label="采购金额" />
              <el-table-column
                show-overflow-tooltip
                prop="total"
                label="采购数量" />
            </el-table>
            <el-table :data="tableData2" border size="mini" height="350px">
              <el-table-column
                show-overflow-tooltip
                prop="productName"
                label="产品名称" />
              <el-table-column
                show-overflow-tooltip
                prop="totalAmount"
                label="采购金额" />
              <el-table-column
                show-overflow-tooltip
                prop="total"
                label="采购数量" />
            </el-table>
          </div>
          <el-pagination
            :current-page="currentPage"
            background
            layout="prev, pager, next"
            :total="total"
            @currentChange="currentChange" />
        </template>
      </div>
    </div>
  </el-card>
</template>

<script>
import Tabs from './tabs.vue'
import { productRank } from '@/api/report/report'
export default {
  components: {
    Tabs
  },

  data() {
    return {
      currentYear: 'this',
      summary: {},
      years: [
        { name: '今年', value: 'this' },
        { name: '去年', value: 'last' }
      ],
      currentTab: 'sale',
      tabs: [
        { name: '销售', value: 'sale' },
        { name: '采购', value: 'procure' }
      ],
      currentPage: 1,
      total: 1000,
      tableData: [],
      tableData2: []
    }
  },
  created() {
    this.productRank(this.currentTab)
  },
  watch: {
    currentTab() {
      this.productRank(this.currentTab)
    },
    currentYear() {
      this.productRank(this.currentTab)
    }
  },
  methods: {
    productRank(type) {
      var queryParams = {
        year: this.currentYear
      }
      productRank(type, queryParams).then((response) => {
        this.summary = response.data.summary
        var result =this.splitArray(response.data.productData.list,5)
        this.tableData = result[0]
        this.tableData2 = result.length>1?result[1]:[]
        this.total = response.data.productData.total
      })
    },
    getTableData() {},
    currentChange() {}
  }
}
</script>

<style lang="scss" scoped>
.home__waiting-payment {
  .home__waiting-payment__content {
    margin: 20px 0;
    display: flex;
    .home__waiting-payment__echart {
      width: 100%;
      height: 250px;
    }
    ::v-deep .el-table:first-child {
      flex: 1;
      margin-right: 30px;
    }
    :v-deep .el-table {
      width: 100%;
    }
  }
}
</style>
